<template>
  <section class="component inner-rank-list">
    <common-title title="催收员回款排行榜">
      <chart-query-form   v-on:update-query = "updateData" slot="append" v-model="innerCaseModel"></chart-query-form>
    </common-title>

    <data-box :height="300" :data="innerDataSet" indexLabel="排名">
      <template slot="columns">
        <el-table-column prop="name" label="姓名" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="caseTotalAmount" label="案件总金额(元)" align="right" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="caseTotalNum" label="案件总数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="casePaybackAmount" label="回款案件金额(元)" align="right" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="casePaybackNum" label="回款案件数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="paybackRate" label="回款率" :min-width="$helper.getColumnWidth(3)" :formatter="row => $filter.toPercent(row.paybackRate)">
        </el-table-column>
      </template>
    </data-box>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { VeHistogram } from "v-charts";
import DataBox from "~/components/common/data-box.vue";
import { HomePageService } from '~/services/domain-service/home-page.service';
import ChartQueryForm from "~/components/dashboard/chart-query-form.vue"; 

@Component({
  components: {
    VeHistogram,
    ChartQueryForm
  }
})
export default class InnerRankList extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private innerDataSet: any[] = [];

  private innerCaseModel = {
    dateDimension: 'WEEK',
    rankingType: 'PAYBACK_AMOUNT',
    overduePeriod: '1',
    productName: '',
    
  };

  /**
   * 更新案件还款数据
   */
  private updateData() {
    this.homePageService.getCollectorRackIngData(this.innerCaseModel).subscribe(
      data => {
        this.innerDataSet = data
      }
    )
  }

  private mounted() {

    this.updateData()
  }
}
</script>

<style lang="less" scoped>
</style>
